<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="force-rendering" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="keywords" content="IKKI, IKKI2000, IKKI Studio, IKKI-Studio, ikki, ikki2000, ikkistudio, Kendo, Kendo UI, KendoUI, Kendo-UI, kendo, kendoui, kendo-ui, admin, admin-ui, admin-dashboard, dashboard, dashboard-templates, template, framework, site, website, bootstrap, bootstrap4, responsive, responsive-design, responsive-web-design, responsive-layout, layout">
        <meta name="description" content="Kendo UI Admin & Site base on Kendo UI for jQuery and Bootstrap 4.">
        <meta name="author" content="IKKI &amp; Amikoko">
        <meta name="copyright" content="UED Center">
        <title>Kendo UI Admin by IKKI &amp; Amikoko</title>
        <base href="https://ikki2000.gitee.io/kendoui-admin-site/" type="admin">
        <link href="img/favicon.png" rel="icon" type="image/png">
        <link href="css/fontawesome-all.min.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link id="Amikoko" href="css/themes/theme_default.min.css" rel="stylesheet">
        <link href="css/amikoko.admin.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
        <script id="IKKI" src="js/global/kendo.zh-CHS.js"></script>
        <script src="js/ikki.js"></script>
    </head>
    <body id="login">
        <main>
            <form>
                <img id="avatar" src="img/avatar.png" alt="">
                <h3>Kendo UI Admin<small>后台管理系统</small></h3>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-user"></i>用户名</span>
                        </div>
                        <input class="form-control form-control-lg" name="username" type="text" placeholder="请输入：Admin" required data-required-msg="请输入用户名！" pattern="[A-Za-z0-9_\-\u4E00-\u9FA5]{2,20}" data-pattern-msg="用户名由2-20个大小写字母、数字、下划线或汉字组成！">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-key"></i>密&emsp;码</span>
                        </div>
                        <input class="form-control form-control-lg" name="password" type="password" placeholder="请输入：IKKI2000" required data-required-msg="请输入密码！" pattern="[A-Za-z0-9]{6,20}" data-pattern-msg="密码由6-20个大小写字母或数字组成！">
                    </div>
                </div>
                <div class="form-group">
                    <div id="verify"></div>
                </div>
                <div class="form-group">
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" id="remember" type="checkbox">
                        <label class="custom-control-label" for="remember">记住密码</label>
                    </div>
                </div>
                <button class="btn btn-primary btn-lg btn-block" type="button" disabled>登&emsp;录</button>
            </form>
        </main>
        <footer>Powered by IKKI &amp; Amikoko &copy; 2018-2019 UED Center</footer>
        <div class="k-loading-image" id="loading"></div>
        <script src="js/jquery.particleground.js"></script>
        <script src="js/jquery.verify.js"></script>
        <script>
            $(function () {
                // 是否已登录
                if (sessionStorage.getItem('logged')) {
                    $('#avatar').attr({'src': sessionStorage.getItem('avatar'), 'alt': sessionStorage.getItem('username')}).addClass('user-avatar').next().text(sessionStorage.getItem('username'));
                    $('.form-group, .btn-primary').slideUp(800, function () {
                        location.href = $('base').attr('href') + $('base').attr('type');
                    });
                }
                // 提示
                noticeMsg('请输入任意用户名和密码登录', 'info', 'top', 5000);
                // 动态背景
                $('#login').particleground();
                // 记住密码
                $('input[name="username"]').val(localStorage.getItem('username'));
                $('input[name="password"]').val(localStorage.getItem('password'));
                if (localStorage.getItem('remember')) {
                    $('#remember').prop('checked', true);
                } else {
                    $('#remember').prop('checked', false);
                }
                // 表单验证
                var validator = $('form').kendoValidator().data('kendoValidator');
                // 滑块验证
                $('#verify').slideVerify({
                    success: function (obj) {
                        $('.btn-primary').prop('disabled', false).unbind('click').click(function () {
                            // 表单验证成功
                            if (validator.validate()) {
                                $('#loading').show();
                                $('.btn-primary').prop('disabled', true);
                                $.fn.ajaxPost({
                                    ajaxData: $('form').serializeObject(),
                                    ajaxUrl: 'json/login.json',
                                    finished: function (res) {
                                        $('#loading').hide();
                                    },
                                    succeed: function (res) {
                                        // 记住密码
                                        if ($('#remember').prop('checked')) {
                                            localStorage.setItem('username', $('input[name="username"]').val());
                                            localStorage.setItem('password', $('input[name="password"]').val());
                                            localStorage.setItem('remember', true);
                                        } else {
                                            localStorage.removeItem('username');
                                            localStorage.removeItem('password');
                                            localStorage.removeItem('remember');
                                        }
                                        // 存储登录状态
                                        sessionStorage.setItem('token', res.data.token);
                                        sessionStorage.setItem('userid', res.data.userid);
                                        sessionStorage.setItem('avatar', res.data.avatar);
                                        sessionStorage.setItem('username', $('input[name="username"]').val());
                                        sessionStorage.setItem('password', $('input[name="password"]').val());
                                        sessionStorage.setItem('logged', true);
                                        sessionStorage.removeItem('locked');
                                        // 头像动画及页面跳转
                                        $('#avatar').attr({'src': res.data.avatar, 'alt': res.data.username}).addClass('user-avatar').next().text(res.data.username);
                                        $('.form-group, .btn-primary').slideUp(800, function () {
                                            location.href = $('base').attr('href') + $('base').attr('type') + '/index_gitee.html';
                                        });
                                    },
                                    failed: function (res) {
                                        obj.refresh();
                                    }
                                });
                            }
                        });
                    }
                });
            });
        </script>
    </body>
</html>